<template>
	<view>
		<view @tap="$emit('hideModal',$event)" catchtouchmove="preventTouchMove" id="modal-mask" v-if="data.showModal"></view>
		<view class="modal-dialog" v-if="data.showModal">
			<view @tap="$emit('close_box',$event)">
				<image class="close3" :src="data.__wxapp_img.dapp.close3.url"></image>
			</view>
			<view class="modal-title" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{data.goods_name}}</view>
			<scroll-view scrollY="true" style="height: 100%;">
				<view class="modal-content">
					<view>
						<view class="attr-group" v-if="attr_group.attr_list.length>0" v-for="(attr_group,index) in data.attr_group_list"
						 :key="attr_group.id">
							<view class="attr-group-name">{{attr_group.attr_group_name}} :</view>
							<view class="attr-list">
								<text @tap="$emit('attrClick',$event)" :class="['attr_name', item.checked?'select_active':'', item.is_attr_num?'attr_num_0':'']"
								 :data-group-id="attr_group.attr_group_id" :data-id="item.attr_id" v-for="(item,i) in attr_group.attr_list"
								 :key="item.id">{{item.attr_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="modal-footer">
				<view class="guigeprice" v-if="data.check_goods_price">￥{{data.check_goods_price}}</view>
				<view class="guigeprice" v-else>￥{{data.temporaryGood.price}}</view>
				<view class="btn-car_num" v-if="data.check_num">
					<image @tap="$emit('guigejian',$event)" class="carStandard" :src="data.__wxapp_img.dapp.jian.url"></image>
					<input @input="$emit('goodNumChange',$event)" class="carStandard good_num" id="num" maxlength="999" type="number"
					 :value="data.check_num"></input>
					<image @tap="$emit('onConfirm',$event)" class="carStandard" :src="data.__wxapp_img.dapp.jia.url"></image>
				</view>
				<view @tap="$emit('onConfirm',$event)" class="btn-car" data-status="confirm" style="background:#FF4544;color:#FFFFFF;"
				 v-else>加入购物车</view>
			</view>
		</view>
	</view>
</template>
<script>
	var myVue = {};
	export default {
		props: ['data']
	}
</script>
<style scoped>
	#modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: var(--window-top);
		left: 0;
		background: #000;
		opacity: .5;
		overflow: hidden;
		z-index: 9999;
		color: #fff
	}

	.modal-dialog {
		width: 638upx;
		overflow: hidden;
		position: fixed;
		top: calc(40% + var(--window-top));
		left: 0;
		background: #fff;
		margin: -180upx 60upx;
		border-radius: 16px;
		z-index: 9999
	}

	.close3 {
		position: absolute;
		width: 36px;
		height: 36px;
		left: 87%
	}

	.modal-title {
		padding: 60upx 90upx 40upx 90upx;
		color: #353535;
		text-align: center;
		font-size: 14px;
		font-weight: 700
	}

	.modal-content {
		padding: 0upx 32upx;
		font-size: 16px;
		color: #959595;
		height: 260upx
	}

	.attr-group {
		margin-bottom: 20upx
	}

	.attr_name {
		margin-top: 20upx;
		margin-right: 60upx;
		background: #f7f7f7;
		display: inline-block;
		padding: 0upx 30upx;
		border-radius: 10upx;
		color: #000
	}

	.attr_num_0 {
		color: #959595
	}

	.select_active {
		color: #ff4544;
		background: #fff5f5
	}

	.modal-footer {
		padding: 20upx 0upx;
		height: 108upx;
		background: #f7f7f7;
		justify-content: space-between
	}

	.guigeprice {
		height: 100%;
		width: 30%;
		float: left;
		font-size: 15px;
		font-weight: 700;
		color: #ff4544;
		display: flex;
		margin-left: 32upx;
		align-items: center
	}

	.btn-car_num {
		height: 100%;
		float: right;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 32upx
	}

	.btn-car {
		height: 100%;
		width: 240upx;
		float: right;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 32upx;
		margin-bottom: 20upx;
		border-radius: 8px
	}

	.standard {
		border-radius: 100%;
		width: 50upx;
		height: 50upx;
		float: right;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.good_num {
		width: 80upx;
		text-align: center
	}
</style>
